<template>
    <div class="background">
        <div class="header">
             <h1>后台管理系统</h1>
        </div>
      <form >
            <div class="login">
                 <div class="head">
                     <h4>后台登录：</h4>
             </div>
                <ul>
                    <li><label >用户：</label><input type="text" v-model="user" placeholder="昵称">
                   </li>
                    <li><label >密码：</label><input type="password" v-model="psw"  placeholder="密码">
                   </li>
                    <li class="btn" @click ='tologin'>登录</li>
                </ul>
            </div>
        </form>
        <div class="foot">
         <p>Copyright@ 后台系统管理 All Rights Reseverd</p>
        </div>
    </div>    
</template>
<script>
import axios from "axios"
export default {
     data(){
         return{
         user:'',
         psw:''
         }
     },
    methods:{
        tologin(){
            axios.post('users/Login',{admin_name:this.user,admin_pass:this.psw}).then(res=>{
                if(res.data){
                    this.$router.push('/All/goodsList')
                }else{
                    alert('抱歉！密码错误，请查证后再输入')
                }
            })
        }
    }

}
</script>
<style  scoped>
 html,body,ul,li,h1{
     margin: 0px;
     padding: 0px;
 }
  .background{
      background-color: #E9EEF3;
  }
 li{
     list-style: none;
     margin: 20px;
    
 }
 form{
     margin-top: 50px;
     
 }
 .login{
     width: 280px;
     height: 280px;
     border: 1px slategray solid;
     margin: 0 auto;
     background-color: silver;
 }
 input{
     width: 160px;
     height: 20px;
     outline: none;
    
 }
 .btn{
     width: 160px;
     background-color: #00B51D;
     color: white;
     text-align: center;
     height: 30px;
     line-height: 30px;
     border-radius: 5px;
     opacity: 0.7;
     margin: 0 auto;
 }
 .btn:hover{
     opacity: 1;
 }
 .head{
     width: 100%;
     height: 50px;
     border-bottom: 1px solid slategray;
     color: white;
      /* background-color: #00B51D;
        opacity: 0.7; */
 }
 .header{
     background-color: #3E4455;
     opacity: 0.6;
     border-bottom: 5px solid #00B51D;
     width: 100%;
     height: 50px;
 }
 h1{
     color: white;
     margin-left: 20%;

 }
 .foot{
     width: 100%;
     height: 100px;
     background-color: #333333;
     margin-top: 150px;
 }
  p{
     color: silver;
     text-align: center;
     padding-top: 30px;
     font-size: 12px;
 }
</style>>


